<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js で mqo ビューアー</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.6.min.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/primitive.gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/collada.gl.enchant.js"></script>
        <script type="text/javascript" src="debug-camera3d.gl.enchant.js"></script>
        <script type="text/javascript" src="mqo.gl.enchant.js"></script>
        <script>
            // おまじない
            enchant();
            
            //var MODEL_NAME = '../images/droid.dae';
            // var MODEL_NAME = 'model/planet.mqo';
            // var MODEL_NAME = 'model/skysphere.mqo';
            // var MODEL_NAME = 'model/inoshishi.mqo';
            var MODEL_NAME = 'model/marukichi.mqo';
            
            DebugCamera3D.DEFAULT_DISTANCE = 24;
            
            window.onload = function() {
                var game = new Game(640, 640);
                game.fps = 60;
                game.keybind(90, 'a');      // z
                game.keybind(88, 'b');      // x
                game.keybind(32, "space");  // space
                                
                game.preload(MODEL_NAME);
                
                game.onload = function() {
                    // 3D 用シーン生成
                    var scene = new Scene3D();
                    scene.backgroundColor = [0.1, 0.2, 0.25, 1];
                    
                    // ライト生成
                    var light = new DirectionalLight(); // 平行光源生成
                    light.directionZ = 1;               // 向き
                    light.color = [1.0, 1.0, 1.0];      // 色
                    scene.setDirectionalLight(light);   // scene にセット
                    
                    // カメラ生成
                    var camera = new DebugCamera3D();   // カメラ生生
                    scene.setCamera(camera);            // scene にセット
                    camera.enable(game.rootScene);      // 有効化
                    
                    
                    // ターゲット
                    var target = new Sprite3D();        // 球体生成
                    target.x = target.y = target.z = 0; // 位置をセット
                    target.set(game.assets[MODEL_NAME]);
                    scene.addChild(target);             // scene にセット
                    
                    // モデルを回転
                    var phi   = 0;      // X軸回転値
                    var theta = 0;      // Y軸回転値
                    var offsetX = 0;    // touch の offsetX
                    var offsetY = 0;    // touch の offsetY
                    var matrix = new mat4.create(); // 回転行列用マトリックスバッファ
                    
                    // 更新イベント登録
                    game.rootScene.addEventListener("enterframe", function(e)
                    {
                        var input = game.input;
                        
                        // 十字キーによる回転
                        if (game.input.up)    { phi -= 0.05; }
                        if (game.input.down)  { phi += 0.05; }
                        if (game.input.right) { theta += 0.05; }
                        if (game.input.left)  { theta -= 0.05; }
                        
                        // Y軸, X軸回転行列を作成
                        mat4.identity(matrix);          // 単位行列化
                        mat4.rotateY(matrix, theta);    // Y軸回転
                        mat4.rotateX(matrix, phi);      // X軸回転
                        // 回転行列をセット
                        target.rotation = matrix;
                    });
                    
                    
                    document.ondragover  = function() { return false; };
                    document.ondragenter = function() { return false; };
                    document.ondrop = function(e) {
                        e.preventDefault();
                        var file    = e.dataTransfer.files[0];
                        var reader  = new FileReader();
                        var ext     = file.fileName.match(/\.\w+$/)[0];
                        if (ext) ext = ext.slice(1).toLowerCase();
                        var imageExt = { "png": true, "jpg": true, "bmp": true };
                        
                        if (ext == "mqo") {
                            // 現在のモデルを破棄して新たなモデルを追加
                            reader.onload = function(e) {
                                enchant.gl.Sprite3D.loadMqoFromData(e.target.result, function(model) {
                                    scene.removeChild(target);
                                    scene.addChild(model);
                                    target = model;
                                });
                            };
                            
                            reader.readAsText(file);
                        }
                        else if (imageExt[ext] === true) {
                            // 現在のモデルにテクスチャを貼り付ける
                            reader.onload = function(e) {
                                var image = new Image();
                                image.src = e.target.result;
                                image.onload = function() {
                                    var texture = new Texture(image);
                                    for (var i=0,len=target.childNodes.length; i<len; ++i) {
                                        var childNodeMesh = target.childNodes[i].mesh;
                                        childNodeMesh.texture = texture;
                                    }
                                }
                            };
                            
                            reader.readAsDataURL(file);
                        }
                    };
                };
                
                game.start();
                
            };
            
        </script>
    </head>
    <body>
    </body>
</html>